<template>
  <h1>普通消息提示</h1>
  <el-button @click="open">普通消息提示</el-button>
  <h1>自定义消息提示</h1>
  <el-button @click="openVn">自定义消息提示</el-button>
  <h1>手动关闭</h1>
  <el-button @click="close">关闭消息提示</el-button>
</template>

<script setup>

import { h } from 'vue'
import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    message: '这是一条普通消息提示',
    type: 'success',
    showClose: true,
    center: true
  })

}

const openVn = () => {
  // 给 p 标签加了一个 span 标签,然后让字体倾斜
  ElMessage({
    message: h('p', null, [
      h('span', null, '自定义内容: '),
      h('i', { style: 'color: teal' }, '秦晓林真帅'),
    ]),
  })
}

const close = () => {
  ElMessage.closeAll()
}

</script>

<style scoped>

</style>